<template>
  <div class="my_background">
    <el-row>
      <el-col :offset="13" :span="7">
        <el-card style="margin-top: 130px">
          <el-form :rules="rules" ref="form" :model="form" label-width="80px">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="form.username"></el-input>
            </el-form-item>

            <el-form-item label="电话号码" prop="phone">
              <el-input v-model="form.phone">
                <el-button slot="append" :disabled="doClick" @click="verificationHandle">{{ content }}</el-button>
              </el-input>
            </el-form-item>

            <el-form-item label="验证码" prop="verification">
              <el-input v-model="form.verification"></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="form.password"></el-input>
            </el-form-item>

            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input type="password" v-model="form.confirmPassword"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button style="margin-left: 30%" type="primary" @click="onSubmit">注册</el-button>
              <el-button @click="goLogin">去登陆</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  name: "ForgetPassword",
  data() {
    return {
      form: {
        phone: '',
        username: '',
        verification: '',
        password: '',
        confirmPassword: ''
      },
      rules: {
        phone: [
          {required: true, trigger: 'blur', validator: this.validPhone}
        ],
        verification: [
          {required: true, message: '请输入验证码', trigger: 'blur'},
          {min: 6, max: 6, message: '请输入正确的验证码'}
        ],
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 3, max: 7, message: '用户名在3-7个字符间', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 10, max: 20, message: '长度在10-20个字符'}
        ],
        confirmPassword: [
          {required: true, message: '请确认密码', trigger: 'blur'},
          {validator: this.confirm, trigger: 'blur'}
        ]
      },
      content: '发送',
      doClick: false
    }
  },
  methods: {
    validPhone(rule, value, callback) {
      if (!value) {
        callback(new Error('请输入电话号码'));
      } else if (!(/^1[3|4|5|7|8][0-9]\d{8}$/.test(value))) {
        callback(new Error('请输入正确的11位手机号码'));
      } else {
        callback();
      }
    },
    confirm(rule, value, callback) {
      if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    },
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let user = this.form;
          delete user.confirmPassword;
          this.$axios.post('/user/registry', this.$qs.stringify(user)).then(res => {
            if (res.code === 200) {
              this.$message({message: '注册成功！', type: 'success'});
              setTimeout(() => {
                this.$router.push({path: '/login'});
              }, 1000);
            }
          });
        }
      });
    },
    goLogin() {
      this.$router.push({path: '/login'});
    },
    verificationHandle() { //发送验证码
      let reg = /^1[3|4|5|7|8][0-9]\d{8}$/;//来自网上，如不正确请修改
      if (!reg.test(this.form.phone)) return this.$message({type: 'warning', message: '请输入正确的11位手机号码'});
      this.doClick = true;
      this.content = 60;
      this.countDown(60);
      this.$axios.post('/other/getPhoneVerification', this.$qs.stringify({phone: this.form.phone, type: 0})).then();
    },
    countDown(count) {
      setTimeout(() => {
        this.content -= 1;
        if (this.content > 0) {
          this.countDown(this.content);
        } else {
          this.content = '发送';
          this.doClick = false;
        }
      }, 1000)
    }
  }
}
</script>

<style scoped>
.my_background {
  width: 100%;
  height: 100%;
  background-image: url("../../assets/bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
